<template>
  <div class="kuangs">
    <div class="title">
      尾矿库列表
    </div>
    <div class="search">
      <el-input
          size="mini"
          placeholder="输入关键字进行过滤"
          suffix-icon="el-icon-search"
          clearable
          v-model="filterText">
      </el-input>
    </div>

    <el-tree
        highlight-current
        class="filter-tree"
        :data="pondTreeList"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        node-key="key"
        ref="tree">
      <template v-slot="{ data }">
        <div
            class="tree-custom-dom"
            :class="{active: value === data.id}"
            @dblclick="handlerdbClick(data)"
            @click="handlerClick(data)">
          <span>{{data.label}}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
import {cofirmAction} from "../../../../../store/actionTypes";

export default {
  name: "Kuangs",
  props:{
    value:'',
    pondTreeList:Array,
    viewPondId: [String,Number]
  },
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tiles: null,
    };
  },
  created() {
    this.$store.dispatch(cofirmAction.UPDATE_LEFTMENU);
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    filterNode(value, data, node) {
      if (!value) return true;
      let if_one = data.label.indexOf(value) !== -1;
      let if_two =
        node.parent &&
        node.parent.data &&
        node.parent.data.label &&
        node.parent.data.label.indexOf(value) !== -1;
      let if_three =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.data &&
        node.parent.parent.data.label &&
        node.parent.parent.data.label.indexOf(value) !== -1;
      let result_one = false;
      let result_two = false;
      let result_three = false;
      if (node.level === 1) {
        result_one = if_one;
      } else if (node.level === 2) {
        result_two = if_one || if_two;
      } else if (node.level === 3) {
        result_three = if_one || if_two || if_three;
      }
      return result_one || result_two || result_three;
    },
    handlerClick(data) {
      if(!data.children){
        this.$emit('input',data.id)
      }
    },
    handlerdbClick(data){
      if(!data.children){
        this.$emit('update:viewPondId',data.id)
      }
    }
  },


}
</script>

<style lang="scss" scoped>
.tree-custom-dom{
  user-select: none;
  span{
    position: relative;
    z-index: 1;
  }
  &.active:before{
    background: rgb(6, 66, 100);
  }
 &:before{
   content: '';
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
 }
}
.kuangs{
  color: #fff;
  >>>{
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background-color: #064264;
    }
    .el-tree-node__content:hover,
    .el-tree-node:focus>.el-tree-node__content {
      background-color: transparent;
    }
    .el-tree {
      position: relative;
      cursor: default;
      background-color: rgba(0, 0, 0, 0);
      color: #fff;
    }
    .el-input{
      width: 90%;
      color: #fff;

    }
  }

  .title{
    height: 36px;
    line-height: 36px;
    opacity: 0.85;
    border-left: 3px solid rgb(5, 211, 247);
    padding-left: 5px;
    background-image: linear-gradient(to right, rgb(14, 67, 115) 0%, transparent 80%);
    margin-bottom: 10px;
  }
  .search{
    text-align: center;
    margin-bottom: 10px;
  }


}

</style>
<style>
.el-tree-node{
  position:relative;
}
.alarmbg {
  background: url("../../../../../../static/images/modal_bg_1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.divpoint2 .title {
  position: inherit;
  top: 0px;
  left: 70px;
  font-size: 14px;
  text-align: left;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.75);
}

.divpoint2 .content {
  position: inherit;
  font-size: 14px;
  top: 35px;
  left: 80px;
  width: 140px;
  text-align: left;
  color: rgba(255, 255, 255, 0.9);
}
.divpoint2 td {
  line-height: 120%;
  padding: 5px 0;
}

</style>
